<template>
  <basic-dialog
    width="40%"
    title="批量设置归类"
    :visible.sync="visible"
    :handleClose="handleClose"
  >
    <div class="body_wrap">
      <el-select
        v-model="categoryUuid"
        placeholder="请选择"
      >
        <el-option
          v-for="item in classificationDTOS"
          :key="item.uuid"
          :label="item.classificationName"
          :value="item.uuid"
        />
      </el-select>
    </div>
    <el-row slot="ft" type="flex" justify="center">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </el-row>
  </basic-dialog>
</template>

<script>
import BasicDialog from '@/components/BasicDialog';
export default {
  components: {
    BasicDialog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    classificationDTOS: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      categoryUuid: ''
    }
  },
  methods: {
    // 确定
    handleSubmit () {
      if (!this.categoryUuid) return this.$message.warning('请选择归类名称')
      const result = this.classificationDTOS.find(item => item.uuid == this.categoryUuid)
      const {
        classificationName,
        uuid,
        taxCateName,
        taxCateNo,
        taxRate
      } = result
      this.$emit('update', {
        classificationName,
        classificationUuid: uuid,
        taxCateName,
        taxCateNo,
        taxRate
      })
      this.handleClose()
      this.resetState()
    },
    // 关闭弹窗
    handleClose () {
      this.$emit('update:visible', false)
    },
    // 重置系列状态
    resetState () {
      this.categoryUuid = ''
    }
  }
}
</script>
<style lang="less" scoped>
.body_wrap {
  padding-bottom: 30px;
}
</style>
